﻿@model Eyskens.AutoTaggerWeb.Models.SpotlightResponseModel

@{
    ViewBag.Title = "Spotlight Analysis";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link type="text/css" rel="stylesheet" href="~/Content/style.min.css" />
<div style="margin-top:65px"><h3>Analysis with DBPedia Spotlight</h3></div>
<div style="height:500px;overflow-y:scroll;">
    <h3>Entities</h3>
    <table>
        <tr>
            <td style="width:450px;vertical-align:top;">
                <div id="entities">
                    @if (Model != null && Model.annotations != null && Model.annotations.Resources != null)
                    {
                        foreach (var type in Model.annotations.Resources.Select(e => e.types).Distinct())
                        {
                            <ul>
                                <li data-jstree='{"type":0, "opened" : false, "icon" : "/Content/Images/squares36.png" }'>
                                    @type.Replace(",", " ")
                                    <ul>
                                        @foreach (var annotation in Model.annotations.Resources.Where(et => et.types.Equals(type)).GroupBy(et => et.uri).Select(g => g.First()))
                                        {
                                            <li data-jstree='{"uri":"@annotation.uri","percentageOfSecondRank":"@annotation.percentageOfSecondRank","support":"@annotation.support","type":1, "similarityScore":"@annotation.similarityScore", "icon" : "/Content/Images/taggreensmall.png" }'>@annotation.surfaceForm</li>
                                        }
                                    </ul>
                                </li>
                            </ul>

                        }
                    }

                </div>
            </td>
            <td style="vertical-align:top;padding-left:100px;border-left:solid;">
                <table>
                    <tr><td><h4 style="margin-top:-30px;">Entity details</h4></td></tr>
                    <tr><td id="EntityDetails">Please click an entity node</td></tr>
                    <tr>
                        <td style="padding-top:15px;">
                            <button onclick="CreateKeyword('#EntityWorkingArea');" id="AddEntityBtn" type="button" class="btn btn-primary" disabled="disabled">Make it a SharePoint keyword</button>
                            <button onclick="TagKeyword('#EntityWorkingArea');" id="TagEntityBtn" type="button" class="btn btn-primary" disabled="disabled">Tag document with keyword</button>
                        </td>
                    </tr>
                    <tr><td id="EntityWorkingArea"></td></tr>
                </table>
            </td>
        </tr>
    </table>

    <h3>Top 10 of most used words</h3>
    <table>
        <tr>
            <td>
                <div id="TokenChart" style="width: 900px; height: 500px;"></div>
            </td>
        </tr>
    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="~/Scripts/jstree.min.js"></script>
<script type="text/javascript">
    var CurrentKeyword = null;
    var SPHostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    var SPAppWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    var SPListItemId = decodeURIComponent(getQueryStringParameter("SPListItemId"));
    var SPListId = decodeURIComponent(getQueryStringParameter("SPListId"));
    var SPLanguage = decodeURIComponent(getQueryStringParameter("SPLanguage"));
    var SPClientTag = decodeURIComponent(getQueryStringParameter("SPClientTag"));
    var SPProductNumber = decodeURIComponent(getQueryStringParameter("SPProductNumber"));
    function CreateKeyword(target) {
        $(target).empty().append("Working on it...");
        $.ajax({
            url: '/keyword/create?SPHostUrl=' + SPHostUrl + '&SPLanguage=' + SPLanguage + '&SPClientTag=' + SPClientTag + '&SPProductNumber=' + SPProductNumber + '&SPAppWebUrl=' + SPAppWebUrl,
            type: 'POST',
            data: 'k=' + CurrentKeyword
        }).done(function () {
            $(target).empty().append("Keyword created...");
        }).fail(function () {
            $(target).empty().append("An error occured...");
        });

    }
    function TagKeyword(target) {
        $(target).empty().append("Working on it...");
        $.ajax({
            url: '/keyword/tag?SPHostUrl=' + SPHostUrl + '&SPLanguage=' + SPLanguage + '&SPClientTag=' + SPClientTag + '&SPProductNumber=' + SPProductNumber + '&SPAppWebUrl=' + SPAppWebUrl + '&SPListItemId=' + SPListItemId + '&SPListId=' + SPListId,
            type: 'POST',
            data: 'k=' + CurrentKeyword
        }).done(function () {
            $(target).empty().append("Document tagged...");
        }).fail(function () {
            $(target).empty().append("An error occured...");
        });
    }

    $('#entities').jstree();
    $('#entities').on("changed.jstree", function (e, data) {
        if (data.selected.length) {
            $('#EntityWorkingArea').empty();
            var dataNode = data.instance.get_node(data.selected[0]).data.jstree;
            if (dataNode.type == 1) {
                CurrentKeyword = data.instance.get_node(data.selected[0]).text;
                $('#AddEntityBtn').prop('disabled', false);
                $('#TagEntityBtn').prop('disabled', false);
                $("#EntityDetails").empty().append("<table><tr><td>Support</td><td>" + dataNode.support + "</td></tr>" +
                    "<tr><td>Similarity Score</td><td>" + dataNode.similarityScore + "</td></tr>" +
                    "<tr><td>Percentage Of SecondRank</td><td>" + dataNode.percentageOfSecondRank + "</td></tr>" +
                    "<tr><td>Uri</td><td>" + dataNode.uri + "</td></tr>" +
                    "</table>")
            }

        }
    })
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(BuildTokenChart);
    function BuildTokenChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn("string", "Word");
        dataTable.addColumn("number", "1");
        dataTable.addColumn("number", "2");
        dataTable.addColumn("number", "Count");
        @foreach (var token in Model.tokens)
        {
            <text>
        dataTable.addRow(["@token.word",@token.count,@token.count,@token.count]);
        </text>

        }
        var options = {
            bubble: { textStyle: { fontSize: 11 } }

        };

        var chart = new google.visualization.BubbleChart(document.getElementById('TokenChart'));
        chart.draw(dataTable, options);
    }
</script>

